<template>

  <div>



        <el-dialog title="比对结果" :visible.sync="resultShowFlag">
          <span> 错误数量：{{executeTaskResult.count}}  </span>
          <el-table :data="executeTaskResult.compareResultDetailDtos">

            <el-table-column
              prop="anchor"
              label="锚点"
            ></el-table-column>

            <el-table-column
              prop="srcResult"
              label="源sql数据"
            ></el-table-column>

            <el-table-column
              prop="destResult"
              label="目标sql数据"
            ></el-table-column>

            <el-table-column
              prop="message"
              label="信息"
            ></el-table-column>





          </el-table>

          <div slot="footer" class="dialog-footer">

            <el-button @click="resultShowFlag = false">确 定</el-button>


          </div>

        </el-dialog>


        <div>

          <!--<selectTool :options="projects" label="name"  @selectedindex="getProjectIndex"></selectTool>-->
          <el-form :inline="true" :model="searchTaskDtos" class="demo-form-inline">
            <el-form-item label="目录名">
              <el-input  v-model="selectedPro.name"  :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="任务名">
              <el-input v-model="searchTaskDtos.taskName" placeholder="任务名"></el-input>
            </el-form-item>
            <el-form-item label="用例名">
              <el-input v-model="searchTaskDtos.scriptName" placeholder="任务名"></el-input>
            </el-form-item>

            <el-form-item label="执行结果">

              <el-select v-model="searchTaskDtos.resultStatus" placeholder="请选择">
                <el-option
                  v-for="item in resStatus"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="创建人">
              <el-input v-model="searchTaskDtos.createBy" placeholder="任务名"></el-input>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="searchSubmit">查询</el-button>
            </el-form-item>
          </el-form>
          <el-button type="primary" size="mini" @click="executeAllTasks()" >批量执行</el-button>
          <el-button type="primary" size="mini" @click="download" >下载</el-button>
        </div>

        <el-table :data="taskDtos" empty-text="加载中"
                  @selection-change="selectChange"
        >
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
          prop="name"
          label="名称"
        ></el-table-column>
   <el-table-column
          prop="scriptName"
          label="用例名"
        ></el-table-column>


          <el-table-column
            label="最近执行结果"

          >
            <template slot-scope="{row,index}">
              <span>{{row.result == 2?'成功':'失败'}}</span>

            </template>


          </el-table-column>

          <el-table-column
            prop="lastExecuteTime"
            label="最近执行时间"
          ></el-table-column>
          <el-table-column
            prop="createBy"
            label="创建人"
          ></el-table-column>


          <el-table-column label="confirm" >
            <template slot-scope="{row,index}">
              <!-- <span v-show="!row.editable" @dblclick="edit(row,index)">{{row.executor}}</span>
               <el-input v-show="row.editable"  v-model="row.executor.toString()"  ></el-input>-->

              <!--<el-button type="primary" size="mini" @click="updateFlag(row,index)" >修改</el-button>-->
              <div class="setbutton">
                <el-button type="primary" size="mini" @click="executeTask(row,index)" >重新执行</el-button>
                <el-button type="primary" size="mini" @click="viewResult(row,index)" >查看结果</el-button>
                <el-button type="primary" size="mini" @click="deltetaskConfirm(row,index)" >删除任务</el-button>

              </div>

            </template>
          </el-table-column>


        </el-table>









        <div class="block">

          <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="searchTaskDtos.pageNum"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="searchTaskDtos.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total">
          </el-pagination>
        </div>










  </div>
    
</template>

<script>
  import projectTree from './component/projectTree'
  import selectTool from '../shuiyoutools/components/selectTool'
  import {getAllSqlCompareTasks,updateSqlCompareTask,executeTask,getProject,executeTasks,downloadResult,deleteTask} from '../../api/shuzhiCompare'
    export default {
        name: "tasks",
      watch:{


      },

        data(){
          return{
            resultShowFlag:false,
            executeTaskResult:{
              count:0,
              compareResultDetailDtos:[]
            },
            updateTaskFlag:false,
            updateTaskDto:{
              id:0,
              name:'',
              projectId:'',
              scriptId:'',
              srcDbID:'',
              destDbId:'',
              autoflag:0,
              status:1
            },
            searchTaskDtos:{
              pageNum:1,
              pageSize:10,
              projectId:0,
              taskName:'',
              scriptName:'',
              createBy:'',
              resultStatus:0
            },
            taskDtos:[],
            page:{},
            projects:[],
            selectedPro:{},
            selectTasks:[],
            resStatus:[
              {label:'所有',value:0},
              {label:'成功',value:2},
              {label:'失败',value:1},

            ],
            deltetaskno:''
          }

        },
      methods:{

        deltetaskConfirm(row){
          this.deltetaskno = row.taskno
          let that = this
          this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteTask(row.taskno).then(res=>{
              that.getTasks()
            })

            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },

        download(){




          downloadResult(this.selectTasks)
            .then(rep=>{
              console.log(rep)
              let fileName= "121212.xls"
              let aTag = document.createElement('a');
              let blob = new Blob([rep.data]);　　// 这个content是下载的文件内容，自己修改
              aTag.download = "exs.xls";　　　　　　// 下载的文件名
              aTag.href = URL.createObjectURL(blob)

              aTag.click();
              URL.revokeObjectURL(blob)
            })


        },



        executeAllTasks(){
          executeTasks(this.selectTasks).then(res=>{
            this.$notify({
              title: '提示',
              message: '已全部执行完毕',
              duration: 0
            });
          }).catch(err=>{
            this.$notify({
              title: '提示',
              message: '已全部执行完毕',
              duration: 0
            });
          })
        },

        selectChange(value){
          this.selectTasks = value
          console.log('============selectChange=============')
          console.log(value)
        },
        viewResult(row){
          this.$store.dispatch("setSelectedTaskId",row.id)
          this.$router.push("/sycompare/result")
        },
        projectChange(value){
          this.selectedPro = value
          this.searchTaskDtos.projectId = value.id
          this.getTasks()
        },


        executeTask(row){
          let that = this
          executeTask(row.id).then(res=>{
            that.executeTaskResult = res.data
           // that.resultShowFlag = true
            this.warn("执行完毕，请点击查看结果")

          }).catch(err=>{
            that.warn(err.data)
          })
        },
        setSearchProject(index){
          this.searchTaskDtos.projectId = this.projects[index].id
        },
        searchSubmit(){
          this.getTasks()

        },
        pageSizeChange(size){
          this.searchTaskDtos.pageSize = size
          this.getTasks()
        },
        pageCurrentChange(page){
          this.searchTaskDtos.pageNum = page
          this.getTasks()
        },


          updtaeTask(row){
            let that = this
            updateSqlCompareTask(this.updateTaskDto).then(res=>{
              that.getTasks()
            }).catch(err=>{
              that.warn(err.data)
            })
          },

          getTasks(){
            let that = this
            getAllSqlCompareTasks(this.searchTaskDtos).then(res=>{
                that.page = res.data
                that.taskDtos = res.data.list
            }).catch(err=>{
              this.warn(err.data)
            })
          },
        getProject(){

            getProject().then(res=>{
              this.projects = res.data
            }).catch(err=>{
              this.warn(err.data)
            })


        },
        warn(message) {
          this.$alert(message, '标题名称', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
            }
          });
        },



      },
      mounted(){
          this.getTasks()
         // this.getProject()
      },
      components:{
        selectTool,
        projectTree
      }

    }
</script>

<style scoped>
  .set-eltree-textsize >>> .el-tree-node__label {
    font-size: 20px;
  }


  .set-aside >>>  .el-aside {
    padding: 20px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-top: 40px;
  }
  .setbutton >>> .el-button+.el-button {
    margin-left:0px
  }

</style>
